<script setup lang="ts">
import { computed, inject, onMounted, ref, Ref, unref, watchEffect } from 'vue';
import { useDisplay } from 'vuetify';
import AppMain from '@/views/Vuetify/MainView/AppMain.vue';
import NavigationDrawer from '@/components/app/NavigationDrawer.vue';
import AppHeader from '@/components/header/AppHeader.vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { SystemInfo } from "@/entity/entitys";
import { listen } from "@tauri-apps/api/event";
const { t, locale } = useI18n();
const route = useRoute()
const drawer = ref(true);
const rail = ref(true);
//路由名称
const routeName = computed(() => route.path.match('/[^/]+')?.[0] ?? '');

// 应用标题，动态切换不同标题
const appName = ref<string>(t('appName'));
let greetMsg = ref<SystemInfo>({ memory_total: 0, memory_used: 0, cpu_used: '0', hostname: '', cpus: 0 })
async function listen_to_greet() {
  const unlisten = await listen('hello', (event: any) => {
    // event.payload 才是实际的结构体
    greetMsg.value = event.payload;
  });
}

onMounted(() => {
  listen_to_greet()
})

</script>
<template >
  <v-layout class="rounded rounded-md">

    <app-main style="background-color: blue;width: 100%;">
      <v-app-bar color="grey-lighten-2" flat height="20" location="bottom"><v-col class="text-center" cols="12">
          CPUS: {{ greetMsg.cpus }}核 总利用率：{{ greetMsg.cpu_used }}% 内存:{{ greetMsg.memory_total }}GB 已使用:{{
            greetMsg.memory_used }}GB
        </v-col>
      </v-app-bar>
      <AppHeader></AppHeader>
      <NavigationDrawer></NavigationDrawer>
      <div  style="overflow:scroll;">
        <router-view v-slot="{ Component }">
        <transition :name="route.meta.transition">
          <v-layout class="layout" :key="routeName">
            <component :is="Component" />
          </v-layout>
        </transition>
      </router-view>
      </div>
      
    </app-main>
    <v-divider></v-divider>
  </v-layout>
</template>
<style lang="scss" scoped></style>